<template>
  <div>
    <el-input v-model="msg"></el-input>
    <el-button @click="submit">提交</el-button>
    聊天内容展示:
    <ul>
        <li v-for="i in meslist">{{i}}</li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            userid:'',
            ws:null,
            msg:'',
            username:'',
            meslist:[]
        }
    },
    methods:{
        initw(){
            this.userid = this.$route.query.userid
            this.username = "用户" + this.userid
            this.ws = new WebSocket("ws://localhost:8000/ws?userid="+this.userid+"&name="+this.username)
            this.ws.onopen = function(){
                alert("success")
            }
            this.ws.onmessage=(msg)=>{
                var mes = JSON.parse(msg.data)
                this.meslist.push(mes["mes"])
            }
        },
        submit(){
            var mes = this.username + "说:" + this.msg
            this.meslist.push(mes)
            var sendsms = JSON.stringify({"id":"kefu","mes":mes})
            this.ws.send(sendsms)
        }
    },
    mounted(){
        this.initw()
    }
}
</script>

<style>

</style>